<template>
  <div>
    <div class="Searchbox">
      <el-card class="box-card" shadow="never">
        <el-form ref="form" :model="form" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="小组名称">
                <el-input v-model="seleceDeptToPage.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="getCompanyToPages(1)" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogFormVisible=true,flag=1,disabled= false,doAddDeptData(),title='添加小组'">添加</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <br />
      <el-card class="box-card" shadow="never">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="grouName" label="小组名称" width="250"></el-table-column>
          <el-table-column prop="sort" label="排序" width="250"></el-table-column>
          <el-table-column prop="remarks" label="备注" width="250"></el-table-column>
          <el-table-column prop="createTime" label="创建时间">
            <template slot-scope="scope">{{scope.row.createTime | time}}</template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row.id , scope.row.role , 1),disabled = true" type="text" size="small">查看</el-button>
              <!-- <el-button type="text" size="small" @click="eidtData(scope.row),title='编辑小组'">编辑</el-button> -->
              <el-button type="text" size="small" @click="handleClick(scope.row.id , scope.row.role,2),disabled = true,title='编辑小组'">编辑</el-button>
              <el-button @click="doDeleteDept(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagebox">
          <el-pagination background layout="prev, pager, next" :page-size="seleceDeptToPage.pageSize" :total="dataCount" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" label-position="right" :disabled="disabled">
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="AddDeptData.grouName" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="排序" label-width="100px">
          <el-input v-model="AddDeptData.sort" type="number" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="备注" label-width="100px">
          <el-input v-model="AddDeptData.remarks" type="textarea" style="width:200px;"></el-input>
        </el-form-item>

        <div :gutter="20" v-for="(item , index) in evaluateOptionsData">
          <el-form-item label="评价" label-width="100px">
            <el-input v-model="item.data" style="width:200px;  margin-right:10px;"></el-input>
            <template v-if="flag!==2">
              <el-button type="primary" icon="el-icon-remove-outline" circle v-if="index !== 0" @click="DelectevaluateOptionsData(index,1)"></el-button>
              <el-button type="primary" icon="el-icon-circle-plus-outline" circle v-if=" index == 0" @click="addevaluateOptionsData(1)"></el-button>
            </template>
          </el-form-item>
        </div>

        <div :gutter="20" v-for="(item , index) in coverevaluateOptionsData">
          <el-form-item label="被评价" label-width="100px">
            <el-input v-model="item.data" style="width:200px;  margin-right:10px;"></el-input>
            <template v-if="flag!==2">
              <el-button type="primary" icon="el-icon-remove-outline" circle v-if=" index !== 0" @click="DelectevaluateOptionsData(index,2)"></el-button>
              <el-button type="primary" icon="el-icon-circle-plus-outline" circle v-if=" index == 0" @click="addevaluateOptionsData(2)"></el-button>
            </template>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false,AddDeptData = {}" v-if="!disabled">取 消</el-button>
        <el-button type="primary" v-if="flag==2" @click="dialogFormVisible = false">确 定</el-button>
        <el-button type="primary" v-if="flag==1" @click="getaddCompany()">确 定</el-button>
        <el-button type="primary" v-if="flag==3" @click="doupdateDeptMessage()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGroupConfigToPage,
  getAllGroupConfigToList,
  DeleteGroupConfig,
  getEvaluationConfigByIds,
  addGroupConfig,
  updateGroupConfig,
} from "@/api/api";

export default {
  data() {
    return {
      title: "",
      flag: 0,
      dialogFormVisible: false,
      passwordShow: false,
      disabled: true,
      seleceDeptToPage: {
        name: "",
        pageIndex: 1,
        pageSize: 10,
      },
      form: {},
      AddDeptData: {},
      tableData: [],
      dataCount: 0,
      DeptToPage: [],
      CompanyToPages: [],
      DoPassWord: {
        oldPassWord: "",
        newPassWord: "",
      },
      evaluateOptionsData: [{ data: "" }],
      coverevaluateOptionsData: [{ data: "" }],
    };
  },
  mounted() {
    let that = this;
    that.getCompanyToPages(1);

    // that.getAllDeptToLists();
    // that.getAllCompanyToLists();
  },

  filters: {
    time(value) {
      let values = value.split(".")[0]
       return values.replace(/T/g, " ");
    },
  },

  methods: {
    goBack() {
    },

    doAddDeptData() {
      let that = this;
      that.AddDeptData = {};
      that.evaluateOptionsData = [{ data: "" }];
      that.coverevaluateOptionsData = [{ data: "" }];
    },

    addevaluateOptionsData(flag) {
      let that = this;
      if (flag == 1) {
        that.evaluateOptionsData.push({ data: "" });
      } else {
        that.coverevaluateOptionsData.push({ data: "" });
      }
    },

    DelectevaluateOptionsData(index, flag) {
      let that = this;
      if (flag == 1) {
        that.evaluateOptionsData.splice(index, 1);
      } else {
        that.coverevaluateOptionsData.splice(index, 1);
      }
    },

    async doDeleteDept(id) {
      let that = this;
      let params = {
        id: id,
      };
      let res = await DeleteGroupConfig(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.getCompanyToPages(that.seleceDeptToPage.pageIndex);
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    eidtData(row) {
      let that = this;
      that.dialogFormVisible = true;
      // that.AddDeptData = row;
      that.flag = 3;
      that.disabled = false;
    },

    async doupdateDeptMessage() {
      let that = this;

      if (
        that.AddDeptData.grouName == undefined ||
        that.AddDeptData.grouName == ""
      ) {
        that.$message.warning("名称不能为空！");
        return;
      }
      if (that.AddDeptData.sort == undefined || that.AddDeptData.sort == "") {
        that.$message.warning("排序不能为空！");
        return;
      }

      let fh = ",";
      let strTag = that.evaluateOptionsData
        .map(function (obj, index) {
          if (obj != null) {
            if (obj.data != null) {
              return obj.data;
            } else {
              fh = "";
            }
          } else {
            fh = "";
          }
        })
        .join(fh);
      that.AddDeptData.evaluateOptions = strTag;
      let fhs = ",";
      let strTagss = that.coverevaluateOptionsData
        .map(function (obj, index) {
          if (obj != null) {
            if (obj.data != null) {
              return obj.data;
            } else {
              fhs = "";
            }
          } else {
            fhs = "";
          }
        })
        .join(fhs);
      that.AddDeptData.coverevaluateOptions = strTagss;

      let params = that.AddDeptData;
      let res = await updateGroupConfig(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.dialogFormVisible = !that.dialogFormVisible;
        that.getCompanyToPages(that.seleceDeptToPage.pageIndex);
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    async handleClick(id, role, flag) {
      let that = this;
      that.flag = 2;
      that.disabled = false;
      that.title = "查看小组信息";
      that.dialogFormVisible = !that.dialogFormVisible;
      let params = {
        id: id,
      };
      let res = await getEvaluationConfigByIds(params);
      if (res.data.Code == 200) {
        that.AddDeptData = res.data.Data;
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
      that.evaluateOptionsData = [];
      that.coverevaluateOptionsData = [];
      let coverevaluateOptionsArr = res.data.Data.coverevaluateOptions.split(
        ","
      );
      for (let i = 0; i < coverevaluateOptionsArr.length; i++) {
        that.coverevaluateOptionsData.push({
          data: coverevaluateOptionsArr[i],
        });
      }

      let evaluateOptionsArr = res.data.Data.evaluateOptions.split(",");
      for (let i = 0; i < evaluateOptionsArr.length; i++) {
        that.evaluateOptionsData.push({ data: evaluateOptionsArr[i] });
      }
      if (flag == 2) {
        that.disabled = false;
        that.flag = 3;
        that.title = "编辑小组信息";
      }
    },

    async getaddCompany() {
      let that = this;

      if (
        that.AddDeptData.grouName == undefined ||
        that.AddDeptData.grouName == ""
      ) {
        that.$message.warning("名称不能为空！");
        return;
      }
      if (that.AddDeptData.sort == undefined || that.AddDeptData.sort == "") {
        that.$message.warning("排序不能为空！");
        return;
      }

      let fh = ",";
      let strTag = that.evaluateOptionsData
        .map(function (obj, index) {
          if (obj != null) {
            if (obj.data != null) {
              return obj.data;
            } else {
              fh = "";
            }
          } else {
            fh = "";
          }
        })
        .join(fh);
      that.AddDeptData.evaluateOptions = strTag;
      let fhs = ",";
      let strTagss = that.coverevaluateOptionsData
        .map(function (obj, index) {
          if (obj != null) {
            if (obj.data != null) {
              return obj.data;
            } else {
              fhs = "";
            }
          } else {
            fhs = "";
          }
        })
        .join(fhs);
      that.AddDeptData.coverevaluateOptions = strTagss;

      let params = that.AddDeptData;
      let res = await addGroupConfig(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.dialogFormVisible = false;
        that.getCompanyToPages(that.seleceDeptToPage.pageIndex);
      }
    },

    handleCurrentChange(val) {
      let that = this;
      that.seleceDeptToPage.pageIndex = val;
      that.getCompanyToPages(val);
    },

    async getCompanyToPages(index) {
      let that = this;
      that.seleceDeptToPage.pageIndex = index;
      let params = that.seleceDeptToPage;
      let res = await getGroupConfigToPage(params);
      if (res.data.Code == 200) {
        that.tableData = res.data.Data;
        that.dataCount = res.data.dataCount;
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },
  },
};
</script>

<style scoped>
.Searchbox {
}
</style>